<template>
  <div>
        <transition name="bounce">
            <div class="notice" :class="status.info" ref="note" v-show="status.isshow">
                <i class="iconfont" :class="statusbar"></i>
                <div class="message">
                    {{ status.message }}
                </div>
            </div>
    </transition>
  </div>
</template>

<script>
export default {
    props:["msgStatus"],
    data(){
        return{
            status:{
                info: this.msgStatus.info||"warning",
                message:this.msgStatus.message||"警告信息",
                isshow:this.msgStatus.isshow||false,
            },
        }
    },
    computed:{
        statusbar(){
            switch (this.status.info) {
                case 'success':
                    return 'icon-toast_chenggong';
                case 'error':
                    return 'icon-toast-shibai_huaban';
                case 'warning':
                    return 'icon-toast-jinggao';
                default:
                    return false;
            }        
        },
    },
    watch:{
        "msgStatus.isshow":{
            handler(n,o){
                this.status = this.msgStatus;
                if(n){
                    setTimeout(()=>{
                        this.status.isshow = false;
                    },3000)
                }
            },
        }
    }
}
</script>

<style lang="less" scoped>
    .notice{
        width: 250px;
        height: 50px;
        position: fixed;
        top: 20px;
        left: 0;
        right: 0;
        margin: auto;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 0 20px;
        border-radius: 25px;
        color: #fff;
        font-size: 18px;
        transition-duration: 0.3s;
        .message{
            padding: 0 10px;
        }
        
    } 
    .bounce-enter-active{
        top:-50px;
    }
    .bounce-leave-active{
        transform: translateY(-100px);
    }
    .success{
        background-color: #67C23A;
    }
    .error{
        background-color: #F56C6C;
    }
    .warning{
        background-color: #E6A23C;
    }
</style>
